import { Component, Output, EventEmitter, Input } from '@angular/core';
import { Camera, CameraOptions } from "@ionic-native/camera";
import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker';
import { ModalController } from 'ionic-angular';
// service
import { ActionSheetService } from '../../providers/utils/actionSheet.service';
import * as Constant from '../../constant/constant';
// 图片查看
import { GalleryModal } from 'ionic-gallery-modal'

/**图片选择组件
 */
@Component({
  selector: 'images-selected',
  templateUrl: 'images-selected.html'
})
export class ImagesSelectedComponent {

  @Output() imagesSelected = new EventEmitter<any>();
  @Input() imagePaths: Array<any> = [];
  constructor(
    private actionSheetCtrl: ActionSheetService,
    public modalCtrl: ModalController,
    private camera: Camera,
    private imagePicker: ImagePicker
  )
  {}

  addImg() {
    this.actionSheetCtrl.createCameraActionSheet().then(data=>{
      if(data.type === Constant.CAMERA)
      {
        this.executeCamera();
        return;
      }
      if(data.type === Constant.PHOTO)
      {
        this.executePhoto();
        return;
      }
    });
  }

  /*** 打开相机
  * */
  executeCamera(): void {
    let options: CameraOptions = {
      sourceType: this.camera.PictureSourceType.CAMERA,
      destinationType: this.camera.DestinationType.DATA_URL,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      quality: 50,
      targetWidth: 720,
      encodingType: this.camera.EncodingType.JPEG
    };
    this.camera.getPicture(options).then((imageURI) => {
      this.imagePaths.push({url:Constant.BASE4_PREFIX+ imageURI,type:''});
      this.emitImagesData();
    }, (error) => {
      console.log(error);
    });
  }

  /*** 打开相册
   * */
  executePhoto(): void {
    const imgLen= this.imagePaths.length; // img的长度
    const maxCount= 3- imgLen;
    let options: ImagePickerOptions = {
      maximumImagesCount: maxCount,
      quality: 50,
      outputType: 1,
    };
    this.imagePicker.getPictures(options).then((results) => {
      debugger;
      let newArr = results.map(value => {
        return {url:Constant.BASE4_PREFIX+ value,type:''};
      });
      this.imagePaths = this.imagePaths.concat(newArr);
      this.emitImagesData();
    }, (error) => {
      console.log(error);
    });
  }

  // 发送更新图片数组
  emitImagesData() {
    this.imagesSelected.emit({
      value: this.imagePaths
    });
  }
  /***  打开图片预览
   * @param photos 预览数组
   * @param index 数组index
   */
  executePhotoView(photos: Array<any>,index: number)
  {
    debugger;
    this.actionSheetCtrl.createIdentityCard().then(data=>{
      if(data.type === Constant.LOOK)
      {
        this.createModal(GalleryModal,{
          photos: photos,
          initialSlide: index
        });
        return;
      }
      if(data.type === Constant.RESET)
      {
        this.imagePaths= this.imagePaths.filter((value,i)=> i!==index);
        this.emitImagesData();
        return;
      }
    });
  }

  /*** 创建modal
   * @param page 要到的位置
   * @param data 传输参数, 不传默认空
   * */
  private createModal(page: any,data: any= {})
  {
    let modal = this.modalCtrl.create(page, data,{
      showBackdrop: false,
      enableBackdropDismiss: false,
      enterAnimation: Constant.MODAL_SCALE_UP_ENTER,
      leaveAnimation: Constant.MODAL_SCALE_UP_LEAVE,
    });
    modal.present();
  }

}
